import axios from 'axios';
import React, { Component } from 'react'
import './Gedan.css';
import qs from 'qs';
import Button from '../../components/Button/Button';
export default class Gedan extends Component {
    state = {
        data: {}
    }
    render() {
        
        return (
            <div className="dan-container">
                <Button type="primary" onClick={this.back}>后退</Button>
                <div className="head">
                    <div className="img">
                        <img width="100%" src={this.state.data.imgurl} alt="" />
                    </div>
                    <div className="info">
                        <h2>{this.state.data.dissname}</h2>
                    </div>
                </div>
                <div className="clearfix"></div>
                <div className="songs-list">
                    <table>
                        <thead>
                            <tr><td>ID</td><td>歌曲</td><td>歌手</td><td>专辑</td><td>时长</td></tr>
                        </thead>
                        <tbody>
                            {
                                this.state.data.songlist && this.state.data.songlist.map((item, index) => {
                                    return <tr key={index}><td>{index + 1}</td><td>{item.title}</td><td>{item.singer}</td><td>{item.album}</td><td>{item.duration}</td></tr>;
                                })
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        )
    }

    //网页的后退
    back = () => {

        //执行方法   this.props.history.goForward();  this.props.history.go(-2);
        // this.props.history.goBack();
        this.props.history.go(-1);
    }

    async componentDidMount(){
        //1. params 获取 id 方式
        // let id = this.props.match.params.id;
        //2. query 获取 id 方式
        // let id = qs.parse(this.props.location.search.slice(1)).id;
        //3. state 获取 id 方式
        let id = this.props.location.state.id;
        //发送请求 获取歌单的详细内容
        let result = await axios('http://api.xiaohigh.com/songlist/' + id);
        //保存数据
        this.setState({
            data: result.data
        })
    }
}
